<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>热门活动</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-size: 12px;
            font-family: "宋体";
        }

        .left {
            float: left;
        }

        .right {
            float: right;
        }

        .clear_left {
            clear: left;
        }

        .top_text {
            font-size: 30px;
            font-weight: bold;
            margin: 0px 70px;
        }

        .main {
            width: 80%;
            margin: 20px auto;
        }

        div.main .left{
            margin: 20px;
        }
    </style>
</head>

<body>

    <div style="width:55%;">


        <div class="top">
            <div>
                <span class="left top_text">热门活动</span>
                <span class="right top_text">更多</span>
            </div>
        </div>

        <div class="clear_left"></div>

        <div class="main">
            <div>
                <div class="left">
                    <img src="img/img1.png" alt=""><br>
                    <span>推荐活动 | 原创音乐现金榜T榜</span>
                </div>
                <div class="left">
                    <img src="img/img2.png" alt=""><br>
                    <span>
                        推荐节目|《TAImusic》爆笑来袭</span>
                </div>

                <div class="clear_left"></div>

                <div class="left">
                    <img src="img/img3.png" alt=""><br>
                    <span>推荐歌单 | 继续宠爱张国荣</span>
                </div>
                <div class="left">
                    <img src="img/img4.png" alt=""><br>
                    <span>推荐活动| 330金属音乐巡演 成都小酒馆音乐空间</span>
                </div>
            </div>
        </div>
    </div>
</body>






</html>